<template>
  <detail-dialog
    ref="detailDialog"
    :showChart="showChart"
    :dialogTitle="dialogTitle"
    :tableTitle="tableTitle"
    :tableLabel="tableLabel"
    :tableData="tableData"
    :selection="selection"
    :showExport="showExport"
    :page="page"
    :formData="formData"
    :formItem="formItem"
    @handleSearch="handleSearch"
    @handleExport="handleExportHost"
    @handleSizeChange="handleSizeChange"
    @handleCurrentChange="handleCurrentChange"
  />
</template>

<script>
import DetailDialog from '@/components/DetailDialog'
import { cpuDetail, memDetail } from '@/api/chartDetail.js'
import Cookies from 'js-cookie'
import { exportExcel } from '@/utils/improtFile.js'
export default {
  props: {
    commonStyle: {
      type: Object,
      default: () => {}
    },
    chart_option: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      showChart: false,
      showExport: true,
      dialogTitle: 'CPU使用详情',
      tableTitle: '主机CPU性能指标(70%~80%区间)',
      tableLabel: [
        { label: '监控平台', param: 'btos', align: 'center', sortable: false, isShow: true },
        { label: '区域', param: 'area', align: 'center', sortable: false, isShow: true },
        { label: '操作系统类型', param: 'hostType', align: 'center', sortable: false, isShow: true },
        { label: '服务器名称', param: 'serverName', align: 'center', sortable: false, isShow: true },
        { label: '名称', param: 'name', align: 'center', sortable: false, isShow: true },
        { label: 'IP地址', param: 'ip', align: 'center', sortable: false, isShow: true },
        { label: '使用率', param: 'cpuPercent', align: 'center', sortable: false, isShow: true }
      ],
      tableData: [],
      selection: 'index',
      page: {
        pageNo: 1,
        pageSize: 10,
        total: 0
      },
      detailVal: {},
      detailType: '',
      searchParams: {},
      formData: {
        hostType: '',
        serverName: '',
        ip: '',
        area: ''
      },
      formItem: [
        {type: 'input', label: '服务器类型', name: 'hostType'},
        {type: 'input', label: '服务器名称', name: 'serverName'},
        {type: 'input', label: 'IP地址', name: 'ip'},
        {type: 'input', label: '区域', name: 'area'}
      ]
    }
  },
  components: {
    DetailDialog
  },
  methods: {
    init (val, type) {
      this.detailType = type
      this.detailVal = val
      // 清空数据
      this.searchParams = {}
      for (let item in this.formData) {
        this.formData[item] = ''
      }
      if (type === 'cpu') {
        this.tableLabel[6].param = 'cpuPercent'
        this.getcpuData()
      } else {
        this.tableLabel[6].param = 'memPercent'
        this.getmemData()
      }
      this.$refs.detailDialog.init()
    },
    // cpu详情
    getcpuData () {
      this.dialogTitle = 'CPU使用详情'
      this.tableTitle = `主机CPU性能指标(${this.detailVal.name}区间)`
      this.tableData = []
      let start = this.detailVal.name.split('~')[0]
      let end = this.detailVal.name.split('~')[1]
      cpuDetail({words: JSON.stringify(this.searchParams), page: this.page.pageNo, limit: this.page.pageSize, start: start.split('%')[0], end: end.split('%')[0]}).then(res => {
        if (res.code === 200) {
          res.data.content.map(item => {
            item.cpuPercent = item.cpuPercent + '%'
            return item
          })
          this.tableData = res.data.content
          this.page.total = parseInt(res.data.total)
        } else {
          this.tableData = []
          this.page.total = 0
        }
      })
    },
    // mem详情
    getmemData () {
      this.dialogTitle = 'MEM使用详情'
      this.tableTitle = `主机MEM性能指标(${this.detailVal.name}区间)`
      this.tableData = []
      let start = this.detailVal.name.split('~')[0]
      let end = this.detailVal.name.split('~')[1]
      memDetail({words: JSON.stringify(this.searchParams), page: this.page.pageNo, limit: this.page.pageSize, start: start.split('%')[0], end: end.split('%')[0]}).then(res => {
        if (res.code === 200) {
          res.data.content.map(item => {
            item.memPercent = item.memPercent + '%'
            return item
          })
          this.tableData = res.data.content
          this.page.total = parseInt(res.data.total)
        } else {
          this.tableData = []
          this.page.total = 0
        }
      })
    },
    // 查询
    handleSearch (data) {
      this.searchParams = {...data}
      if (this.detailType === 'cpu') {
        this.getcpuData()
      } else {
        this.getmemData()
      }
    },
    // 数据列表导出
    handleExportHost (val) {
      let start = this.detailVal.name.split('~')[0].split('%')[0]
      let end = this.detailVal.name.split('~')[1].split('%')[0]
      let url = ''
      if (val === 'CPU使用详情') {
        url = '/btos/es/cpu/export'
      } else if (val === 'MEM使用详情') {
        url = '/btos/es/mem/export'
      }
      let data = {
        token: Cookies.get('token'),
        start: start,
        end: end,
        words: JSON.stringify(this.searchParams) !== '{}' ? JSON.stringify(this.searchParams) : ''
      }
      exportExcel(url, data).then(res => {})
    },
    // 当前页数量
    handleSizeChange (val) {
      this.page.pageSize = val
      if (this.detailType === 'cpu') {
        this.getcpuData()
      } else {
        this.getmemData()
      }
    },
    // 当前页码
    handleCurrentChange (val) {
      this.page.pageNo = val
      if (this.detailType === 'cpu') {
        this.getcpuData()
      } else {
        this.getmemData()
      }
    }
  }
}
</script>
